<template>
  <a-row  type="flex" class="pagin">
    <a-col flex="auto" style="text-align: right;">
      <pagin size="small" :total="total" 
        :show-total="(total, range) => `${range[0]}-${range[1]} ${$t('app.setting.pagin.total')} ${total} ${$t('app.setting.pagin.records')}`" 
        show-size-changer show-quick-jumper 
        @change="onChangePagin"
        @showSizeChange="onChangePageSize"
        :pageSizeOptions="pageSizeOptions" 
      />
    </a-col>
    <a-col flex="auto" style="line-height: 24px;">
      <span>{{ $t('app.setting.pagin.total') }} {{ count }} {{ $t('app.setting.pagin.records') }} </span>
    </a-col>
  </a-row>
</template>

<script>

import { Pagination as pagin} from 'ant-design-vue'

export default {
  name: 'Pagination',
  components: {
    pagin
  },
  props: {
    
  },
  data () {
    return {
      // 分页参数
      pageSize: 10,
      page: 1,
      total: 200,
      pageSizeOptions:['10','20','40','80'],
    }
  },
  methods: {

    // page - change处理
    onChangePagin(page, pageSize) {
      this.page = page
      this.pageSize = pageSize
      let param = {
        page: page,
        pageSize: pageSize,
      }
      this.$emit("paginNewInfo", param);
    },

    // pageSize - change处理
    onChangePageSize(current, size){
      this.page = current
      this.size = size
      let param = {
        page: current,
        pageSize: size,
      }
      this.$emit("paginNewInfo", param)
    }
  },
  watch: {
    
  }
}
</script>

<style lang="less" scoped>
.pagin {
  flex-direction: row-reverse;
  justify-content: space-between;
  color: #1890ff;
  margin-top: 15px;
}
</style>
